<template>

  <div class="content-box">
    <nav-title title="离职审批"/>
    <div class="regulations-box">
      <div class="title">基本信息</div>
      <v-wastage-info v-bind:baseInfo="baseInfo"></v-wastage-info>
    </div>
    <div class="regulations-box">
      <div class="title">详细信息</div>
      <v-wastage-detail v-bind:detailInfo="detailInfo"></v-wastage-detail>
    </div>

    <!-- 流程信息 -->
    <div class="regulations-box">
      <div class="title">流程信息</div>
      <div class="info-label" v-show="wastageMoudules1">人力资源面谈</div>
      <div class="info-cell" v-show="actionReasonRule.isDisplay">
        <div class="label2"><span class="red">*</span>离职原因</div>
        <div class="value2">
          <group>
            <popup-radio placeholder="请选择" :options="reasonList" v-model="reason" @on-hide="getDetailReason" :readonly="!actionReasonRule.isEdit"></popup-radio>
          </group>
        </div>
      </div>
      <div class="info-cell" v-show="rsTerDetailRule.isDisplay">
        <div class="label2"><span class="red">*</span>离职详细原因</div>
        <div class="value2">
          <group>
            <popup-radio placeholder="请选择" :options="detailReasonList" v-model="detailReason" :readonly="!rsTerDetailRule.isEdit"></popup-radio>
          </group>
        </div>
      </div>

      <p class="info-cell clearfix" v-show="cRsnSummaryRule.isDisplay">
        <label class="info-label-title"><span class="red">*</span>离职原因总结</label>
      </p>
      <div class="info-label-text" v-show="cRsnSummaryRule.isDisplay">
        <textarea placeholder="请在这里输入..." rows="5" v-model="cRsnSummary" :readonly="!cRsnSummaryRule.isEdit"></textarea>
      </div>

      <div class="info-cell" v-show="cIsRehireRule.isDisplay">
        <div class="label2">今后是否建议录用</div>
        <div class="value2">
          <group>
            <popup-radio placeholder="请选择" :options="suggestList1" v-model="suggest1" :readonly="!cIsRehireRule.isEdit"></popup-radio>
          </group>
        </div>
      </div>

      <p class="info-cell clearfix" v-show="cBriefReasonRule.isDisplay">
        <label class="info-label-title"><span class="red">*</span>简短理由</label>
      </p>
      <div class="info-label-text" v-show="cBriefReasonRule.isDisplay">
        <textarea placeholder="请在这里输入..." rows="5" v-model="cBriefReason" :readonly="!cBriefReasonRule.isEdit"></textarea>
      </div>


      <div class="info-label" v-show="wastageMoudules2">部门面谈</div>
      <p class="info-cell clearfix" v-show="cIntervwNotesRule.isDisplay">
        <label class="info-label-title">面谈记录</label>
      </p>
      <div class="info-label-text" v-show="cIntervwNotesRule.isDisplay">
        <textarea placeholder="请在这里输入..." rows="5" v-model="cIntervwNotes" :readonly="!cIntervwNotesRule.isEdit"></textarea>
      </div>
      <div class="info-cell" v-show="cIsRehireDeptRule.isDisplay">
        <div class="label2">今后是否建议录用</div>
        <div class="value2">
          <group>
            <popup-radio placeholder="请选择" :options="suggestList2" v-model="suggest2" :readonly="!cIsRehireDeptRule.isEdit"></popup-radio>
          </group>
        </div>
      </div>

      <p class="info-cell clearfix" v-show="cBriefRsnDeptRule.isDisplay">
        <label class="info-label-title">简短理由</label>
      </p>
      <div class="info-label-text" v-show="cBriefRsnDeptRule.isDisplay">
        <textarea placeholder="请在这里输入..." rows="5" v-model="cBriefRsnDept" :readonly="!cBriefRsnDeptRule.isEdit"></textarea>
      </div>

    </div>

    <!-- 流程图 -->
    <div class="regulations-box">
      <div class="title">流程图</div>
      <v-flow-charts :transNum="cTransactionNbr"></v-flow-charts>
    </div>

    <!-- 审批意见 -->
    <div class="regulations-box">
      <div class="info-label">审批意见</div>
      <div class="info-label-text">
        <textarea placeholder="请在这里输入..." rows="5" v-model="cComments"></textarea>
      </div>
    </div>

    <!-- 底部按钮 -->
    <div style="height: 50px"></div>
    <!-- 底部按钮 -->
    <div class="fix-btn">
      <button v-if="cApprovalSw == 'Y'" class="blue-btn" @click="doOperate('Approval')">同意</button>
      <button v-if="cAddSw == 'Y'" class="white-btn" @click="doOperate('AddStep')">
        <span>+</span> 加签</button>
      <span v-if="cPushbackAllSw == 'Y'" class="reject-main">
        <button class="yellow-btn" @click="popGroup">驳回</button>
        <transition name="slide-fade">
          <span v-if="showGroup" class="reject-group">
            <button class="yellow-btn" @click="doOperate('PushAllback')">重走</button>
            <button class="yellow-btn" @click="doOperate('Pushback')">不重走</button>
          </span>
        </transition>
      </span>
    </div>
  </div>

</template>

<script>
  import { Selector, Group, PopupPicker,PopupRadio  } from 'vux'
  import { getWastage,getWastageReason,getCompensateProcess,getWastageDetailReason,getWastageApprove } from '../../api/api'
  import vWastageInfo from '../formalStaff/wastageInfo'
  import vWastageDetail from '../formalStaff/wastageDetail'
  import vFlowCharts from '../formalStaff/common/flowChart'
  import { json2Form } from '../../util/http'
  import { dateFormat } from 'vux'

  export default {
    components: {
      vWastageInfo,vWastageDetail,Selector, Group, PopupPicker,PopupRadio,vFlowCharts
    },
    created(){
      this.cTransactionNbr = this.$route.query.cTransactionNbr;
      window.onclick = this.hideGroup;
      //离职审批信息
      this.getWastageInfo();
      //获取字典表信息
      this.getDic();
    },
    mounted(){

    },
    data(){
      return {

        baseInfo: {
          emplid: '',//员工ID
          nameDisplay: '',//姓名
          deptDescr: '',//部门
          rsFullName: '',//部门全称
          jobcodeDescr: '',//岗位
          rsJobLevel: '',//职等
          lastHireDt: '',//入职日期
          cName: '',//带教人
          createdttm: '',//申请日期
          phone: '',//联系电话
        },
        detailInfo: {
          terminationDt: '',//离职日期
          cTerExplain: '',//离职原因说明
          cOtherExplain: '',//其他说明
          //离职日期
          terminationDtRule: {
            isDisplay: true,
            isEdit: false,
          },
          cTerExplainRule: {
            isDisplay: true,
            isEdit: false,
          },
          cOtherExplainRule: {
            isDisplay: true,
            isEdit: false,
          },
        },

        //离职原因总结
        cRsnSummaryRule: {
          isDisplay: true,
          isEdit: false,
        },
        //今后是否录用
        cIsRehireRule: {
          isDisplay: true,
          isEdit: false,
        },
        //简短理由
        cBriefReasonRule: {
          isDisplay: true,
          isEdit: false,
        },
        //离职原因
        actionReasonRule: {
          isDisplay: true,
          isEdit: false,
        },
        //离职详细原因
        rsTerDetailRule: {
          isDisplay: true,
          isEdit: false,
        },
        //面谈记录
        cIntervwNotesRule: {
          isDisplay: true,
          isEdit: false,
        },
        //今后是否建议录用
        cIsRehireDeptRule: {
          isDisplay: true,
          isEdit: false,
        },
        //简短理由2
        cBriefRsnDeptRule: {
          isDisplay: true,
          isEdit: false,
        },

        reasonList: [],
        reason: '',
        detailReasonList: [],
        detailReason: '',
        suggestList1: [{value: '是', key: 'Y'},{value: '否', key: 'N'}],
        suggest1: '',
        suggestList2: [{value: '是', key: 'Y'},{value: '否', key: 'N'}],
        suggest2: '',

        cBriefRsnDept: '',
        cIntervwNotes: '',
        cBriefReason: '',
        cRsnSummary: '',

        cApprovalSw: "",
        cDenySw: "",
        cPushbackAllSw: "",
        cAddSw: "",

        //按钮点击的参数
        cWfType: '',
        cTransactionNbr: '',
        cComments: '',

        authFileds: [],

        //人力资源面谈是否显示
        wastageMoudules1: false,

        //部门面谈
        wastageMoudules2: false,
        showGroup: false

      }
    },
    methods: {
      getDic(){
        //离职原因字典
        getWastageReason({setId: 'XC001'}).then(res=>{
          this.reasonList = [];
          if(res && res.retCode === '000000'){
            for(let i=0; i<res.retData.length; i++){
              this.reasonList.push({value: res.retData[i].descr,key: res.retData[i].actionReson});
            }
          }
        }).catch(res=>{

        });


      },
      getDetailReason(){
        //离职详细原因字典
        getWastageDetailReason({actionReason: this.reason}).then(res=>{
          this.detailReasonList = [];
          if(res && res.retCode === '000000'){
            for(let i=0; i<res.retData.length; i++){
              this.detailReasonList.push({value: res.retData[i].descr,key: res.retData[i].rsTerDetail});
            }
          }
        }).catch(res=>{

        });
      },
      getWastageInfo(){
        let params = {
          cTransactionNbr: this.cTransactionNbr
        };
        getWastage(params).then(res=>{

          if(res && res.retCode === '000000'){
            this.baseInfo.emplid = res.retData.emplid;
            this.baseInfo.nameDisplay = res.retData.nameDisplay;
            this.baseInfo.deptDescr = res.retData.deptDescr;
            this.baseInfo.rsFullName = res.retData.rsFullName;
            this.baseInfo.jobcodeDescr = res.retData.jobcodeDescr;
            this.baseInfo.rsJobLevel = res.retData.rsJobLevel;
            this.baseInfo.lastHireDt = res.retData.lastHireDt;
            this.baseInfo.cName = res.retData.cName;
            this.baseInfo.createdttm = res.retData.createdttm;
            this.baseInfo.phone = res.retData.phone;

            this.detailInfo.terminationDt = dateFormat(res.retData.terminationDt,"YYYY-MM-DD");
            this.detailInfo.cTerExplain = res.retData.cTerExplain;
            this.detailInfo.cOtherExplain = res.retData.cOtherExplain;

            this.cApprovalSw = res.retData.cApprovalSw;
            this.cDenySw = res.retData.cDenySw;
            this.cPushbackAllSw = res.retData.cPushbackAllSw;
            this.cAddSw = res.retData.cAddSw;

            this.cWfType = res.retData.cWfType;

            this.authFileds = res.retData.authFileds;
            for(let i=0; i<this.authFileds.length; i++){
              if(this.authFileds[i].fieldKey == 'terminationDt'){
                let tmd = this.authFileds[i].fieldValue;
                this.detailInfo.terminationDt = tmd;
                this.detailInfo.terminationDtRule.isDisplay = this.authFileds[i].isDisplay;
                this.detailInfo.terminationDtRule.isEdit = this.authFileds[i].isEdit;
              }else if(this.authFileds[i].fieldKey == 'cTerExplain'){
                let cte = this.authFileds[i].fieldValue;
                this.detailInfo.cTerExplain = cte;
                this.detailInfo.cTerExplainRule.isDisplay = this.authFileds[i].isDisplay;
                this.detailInfo.cTerExplainRule.isEdit = this.authFileds[i].isEdit;
              }else if(this.authFileds[i].fieldKey == 'cOtherExplain'){
                let coe = this.authFileds[i].fieldValue;
                this.detailInfo.cOtherExplain = coe;
                this.detailInfo.cOtherExplainRule.isDisplay = this.authFileds[i].isDisplay;
                this.detailInfo.cOtherExplainRule.isEdit = this.authFileds[i].isEdit;
              }else if(this.authFileds[i].fieldKey == 'cRsnSummary'){
                let crs = this.authFileds[i].fieldValue;
                this.cRsnSummary = crs;
                this.cRsnSummaryRule.isDisplay = this.authFileds[i].isDisplay;
                this.cRsnSummaryRule.isEdit = this.authFileds[i].isEdit;
              }else if(this.authFileds[i].fieldKey == 'cIsRehire'){
                if(this.authFileds[i].fieldValue == 'Y'){
                  this.suggest1 = 'Y';
                }else{
                  this.suggest1 = 'N';
                };
                this.cIsRehireRule.isDisplay = this.authFileds[i].isDisplay;
                this.cIsRehireRule.isEdit = this.authFileds[i].isEdit;
              }else if(this.authFileds[i].fieldKey == 'cBriefReason'){
                let cbr = this.authFileds[i].fieldValue;
                this.cBriefReason = cbr;
                this.cBriefReasonRule.isDisplay = this.authFileds[i].isDisplay;
                this.cBriefReasonRule.isEdit = this.authFileds[i].isEdit;
              }else if(this.authFileds[i].fieldKey == 'actionReason'){
                let areason = this.authFileds[i].fieldValue.split(",");
                this.reasonList.push({value: ''+areason[1],key:areason[0]});
                this.reason = areason[0].trim();
                this.actionReasonRule.isDisplay = this.authFileds[i].isDisplay;
                this.actionReasonRule.isEdit = this.authFileds[i].isEdit;
              }else if(this.authFileds[i].fieldKey == 'rsTerDetail'){
                let rtd = this.authFileds[i].fieldValue.split(",");
                this.detailReasonList.push({value: ''+rtd[1],key:rtd[0]});
                this.detailReason = rtd[0].trim();
                this.rsTerDetailRule.isDisplay = this.authFileds[i].isDisplay;
                this.rsTerDetailRule.isEdit = this.authFileds[i].isEdit;
              }else if(this.authFileds[i].fieldKey == 'cIntervwNotes'){
                let cin = this.authFileds[i].fieldValue;
                this.cIntervwNotes = cin;
                this.cIntervwNotesRule.isDisplay = this.authFileds[i].isDisplay;
                this.cIntervwNotesRule.isEdit = this.authFileds[i].isEdit;
              }else if(this.authFileds[i].fieldKey == 'cIsRehireDept'){
                if(this.authFileds[i].fieldValue == 'Y'){
                  this.suggest2 = 'Y';
                }else{
                  this.suggest2 = 'N';
                };
                this.cIsRehireDeptRule.isDisplay = this.authFileds[i].isDisplay;
                this.cIsRehireDeptRule.isEdit = this.authFileds[i].isEdit;
              }else if(this.authFileds[i].fieldKey == 'cBriefRsnDept'){
                let cbrd = this.authFileds[i].fieldValue;
                this.cBriefRsnDept = cbrd;
                this.cBriefRsnDeptRule.isDisplay = this.authFileds[i].isDisplay;
                this.cBriefRsnDeptRule.isEdit = this.authFileds[i].isEdit;
              }

            }

            if(this.actionReasonRule.isDisplay || this.rsTerDetailRule.isDisplay
              || this.cRsnSummaryRule.isDisplay || this.cIsRehireRule.isDisplay
              || this.cBriefReasonRule.isDisplay) {
              this.wastageMoudules1 = true;
            }

            if(this.cIntervwNotesRule.isDisplay || this.cIntervwNotesRule.isDisplay
              || this.cIsRehireDeptRule.isDisplay || this.cBriefRsnDeptRule.isDisplay) {
              this.wastageMoudules2 = true;
            }

            }else{
              this.$vux.alert.show({
                title: '',
                content: res.retMsg
              })
            }
          }).catch (res=>{
            this.$vux.alert.show({
            title: '警告',
            content: '网络异常，请稍后重试'
          })
        })
      },
      doOperate(actionType){
        if (actionType == 'PushAllback' || actionType == 'Pushback') {
          this.showGroup = !this.showGroup
        }
        window.event.cancelBubble = true

        //显示的话再判断
        if(this.detailInfo.terminationDtRule.isDisplay){
          if(!this.detailInfo.terminationDt || this.detailInfo.terminationDt == ''){
            this.$vux.alert.show({
              title: '警告',
              content: '请选择离职日期'
            });
            return;
          }
        }

        if(this.actionReasonRule.isDisplay){
          if(!this.reason || this.reason == ''){
            this.$vux.alert.show({
              title: '警告',
              content: '请选择离职原因'
            });
            return;
          }
        }

        if(this.rsTerDetailRule.isDisplay){
          if(!this.detailReason || this.detailReason == ''){
            this.$vux.alert.show({
              title: '警告',
              content: '请选择离职详细原因'
            });
            return;
          }
        }

        if(this.cRsnSummaryRule.isDisplay){
          if(!this.cRsnSummary || this.cRsnSummary == ''){
            this.$vux.alert.show({
              title: '警告',
              content: '请填写离职原因总结'
            });
            return;
          }
        }

        if(this.cBriefReasonRule.isDisplay){
          if(!this.cBriefReason || this.cBriefReason == ''){
            this.$vux.alert.show({
              title: '警告',
              content: '请填写简短理由'
            });
            return;
          }
        }
        //同意，加签，驳回
        let params = {
          cTransactionNbr: this.cTransactionNbr,//流程编号
          actionType: actionType,
          comments: this.cComments,
          terminationDt: this.detailInfo.terminationDt,
          cOtherExplain: this.detailInfo.cOtherExplain,
          cTerExplain: this.detailInfo.cTerExplain,

          actionReason: this.reason,
          rsTerDetail: this.detailReason,
          cRsnSummary: this.cRsnSummary,

          cBriefReason: this.cBriefReason,
          cIsRehire: this.suggest1,

          cIntervwNotes: this.cIntervwNotes,
          cBriefRsnDept: this.cBriefRsnDept,
          cIsRehireDept: this.suggest2

        };

        if(actionType == 'AddStep'){
          this.$router.push({
            name: 'Visa',
            params: {
              // c_TRANSACTION_NBR: this.cTransactionNbr,
              // c_WF_TYPE: this.cWfType,
              // c_COMMENTS: this.cComments,
              // c_Link: 'Wastage',
              wastageParams: params
            }
          })
        }else{
          getWastageApprove(json2Form(params)).then(res=>{
            if(res && res.retCode === '000000' ){
              let _this = this;
              this.$vux.alert.show({
                title: '成功',
                content: '操作成功',
                onHide () {
                  _this.$router.push("/TodoList");
                }
              })
          }else{
            this.$vux.alert.show({
              title: '',
              content: res.retMsg
            })
          }
        }).catch (res=>{
            this.$vux.alert.show({
            title: '警告',
            content: '网络异常，请稍后重试'
          })
        })
        }

      },
      popGroup() {
        this.showGroup = !this.showGroup
        window.event.cancelBubble = true
      },
      hideGroup() {
        this.showGroup = false
      }
    }
  }
</script>
<style type="text/scss" lang="scss">
@import '../../styles/staff.scss';
.reject-main {
  position: relative;
  .reject-group {
    position: absolute;
    top: -80px;
    left: 0px;
    button {
      margin-bottom: 1px;
    }
  }
}
.slide-fade-enter-active {
  transition: all 0.1s ease;
}
.slide-fade-leave-active {
  transition: all 0.2s cubic-bezier(1, 0.5, 0.8, 1);
}
.slide-fade-enter, .slide-fade-leave-to
/* .slide-fade-leave-active for below version 2.1.8 */ {
  transform: translateY(10px);
  opacity: 0;
}
</style>
